<template>
  <div class="dashboard-container">
    <el-table :data="resultList" style="width: 100%" v-loading="isLoading">
      <el-table-column align="center" label="Index" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="200">
      </el-table-column>
      <el-table-column prop="tokenupdate" label="Token更新">
      </el-table-column>
      <el-table-column prop="gameupdate" label="游戏更新">
      </el-table-column>
      <el-table-column prop="count" label="游戏次数">
      </el-table-column>
      <el-table-column prop="score" label="总分" width="120">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import DexieCtx from "@/utils/dexiectx";

export default {
  name: 'Cats',
  data() {
    return {
      isLoading: false,
      resultList: [],
    }
  },
  mounted() {
    this.loadGameResult()
    const self = this
    this.timer = setInterval(() => {
      self.loadGameResult()
    }, 1000 * 60);
  },
  deactivated() {
    if (this.timer != null) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    async loadGameResult() {
      const dexie = await DexieCtx.db()
      const list = await dexie.cats.toArray()
      this.resultList = list
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
\
